<template>
    <v-form v-model="valid" ref="myBrandForm">
      <v-text-field :rules="nameRules" v-model="brand.name" label="请输入品牌名称" required />
      <v-text-field :rules="letterRules" v-model="brand.letter" label="请输入品牌首字母" required />
      <!--商品分类--级联-->
      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        label="请选择商品分类"/>
      <!--文件上传组件-->
      <v-layout row>
        <v-flex xs3>
          <span style="font-size: 16px; color: #444">品牌LOGO：</span>
        </v-flex>
        <v-flex>
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"
          />
        </v-flex>
      </v-layout>
      <!--按钮-->
      <v-layout class="my-4" row>
        <v-spacer/>
        <v-btn @click="submit" color="primary">提交</v-btn>
        <v-btn @click="clear" >重置</v-btn>
      </v-layout>

    </v-form>
</template>

<script>
    export default {
      name: "my-brand-form",
      data(){
          return{
            valid:false,  //表单校验结果标记
            brand:{
              name:'',  //品牌名称
              letter:'',  //品牌首字母
              image:'',  //品牌logo
              categories:[]   //品牌所属的商品分类数组
            },
          //  品牌名检验规则
            nameRules:[
              v => !!v || "品牌名不能为空",
              v => v.length > 1 || "品牌名至少2位"
            ],
          //  首字母检验规则
            letterRules:[
              v => !!v || "首字母不能为空",
              v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
            ]




          }
      },
      methods:{
        submit(){
        //  提交表单
        //  表单校验
          if(this.$refs.myBrandForm.validate()){
          //  定义一个请求参数对象，通过解构表达式来获取brand中的属性
            const {categories,letter,...params} = this.brand;
          //  数据库只要保存分类的id即可，因此我们对categories的值进行处理，只保留id，并转为字符串
            params.cids = categories.map(c => c.id).join(",");
          //  将字母都处理为大写
            params.letter = letter.toUpperCase();
          //  将数据提交到后台
            this.$http.post('/item/brand',this.$qs.stringify(params)).then(()=>{
              //  弹出提示
              this.$emit("close");
              this.$message.success("保存成功！");
            }).catch(()=>{
              this.$message.error("保存失败！");
            })
          }
        },
        clear(){
        //  重置表单
          this.$refs.myBrandForm.reset();
          // 需要手动清空商品分类
          this.brand.categories = [];
        }
      }
    }
</script>

<style scoped>

</style>
